<template>
  <div id="divbox">
    <div class="login-form">
      <div id="logo">
        <div
          style="font-family: 'Microsoft YaHei';letter-spacing: 0.5px; font-weight: bold; font-size: 40px; text-align: center">
          &nbsp;<span style="color:#4F5155;">找回密码</span>
        </div>
      </div>
      <el-form ref="refform" :model="form" status-icon :rules="rules" label-width="80px">
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.phone" class="input"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password" class="input"></el-input>
        </el-form-item>

        <el-form-item label="确认密码" prop="password1">
          <el-input type="password1" v-model="form.password1" class="input" show-password></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit('refform')" style="width: 300px;">提交</el-button>
          <br/>
          <router-link to="login" style="color: #006A5A;">修改成功？点击登录</router-link>
        </el-form-item>
      </el-form>
    </div>


  </div>
</template>

<script>
  export default {

    data () {
      var phone = (rule, value, callback) => {
        var reg = /^1[3456789]\d{9}$/
        if (value === '') {
          callback(new Error('请输入手机号'))
        } else if (value !== '') {
          if (!reg.test(value)) {
            callback(new Error('手机号格式不正确'))
          }
          callback()
        } else {
          callback()
        }
      }
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'))
        } else if (value !== '') {
          var reg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$/
          if (!reg.test(value)) {
            callback(new Error('密码包含字母、数字、特殊字符两种以上组合'))
          }
          callback()
        }
        callback()
      }

      var validatePass1 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.form.password) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      return {
        form: {
          phone: '',
          password: '',
        },
        rules: {
          phone: [
            {validator: phone, trigger: 'blur'}
          ],
          password: [
            {validator: validatePass, trigger: 'blur'}
          ],
          password1: [
            {validator: validatePass1, trigger: 'blur'}
          ],
        }
      }
    },
    methods: {
      //【登录】
      onSubmit (reffrom) {
        //$refs是一个引用 校验通过发送请求
        this.$refs[reffrom].validate((valid) => {
          if (valid) {
            var data = {
              password: this.form.password,
              phone: this.form.phone
            }
            this.$http.getLogin('user/wx/updatePassword', data).then(res => {
              if (res == undefined) {
                this.$message({showClose: false, message: '修改密码失败'})
              } else {
                if (res.data.code == 200) {
                  this.$message({showClose: true, message: '恭喜你，修改密码成功✔', type: 'success'})
                } else if (res.data.code == 500) {
                  this.$message(res.data.message)
                }
              }
            }).catch(err => {
              this.$message.info(err)
            })
          }
        })
      }
    }
  }
</script>

<style scoped>
  #divbox {
    width: 100%;
    height: 100vh;
    background-image: url("https://ts1.cn.mm.bing.net/th/id/R-C.b923d0630782b4e46dcbb2121b22bdbf?rik=l7wVr9wcUyyTzw&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f68%2f768.jpg&ehk=anhoZ%2fxmeecIhRHc2n9reoQbtJ2xXrvIEx0sJbLLMiI%3d&risl=&pid=ImgRaw&r=0");
    /*将🎀页面背景  图片路径替换为你自己的图片路径*/
    background-size: cover;
    /*保持图片比例并完全覆盖元素*/
    background-position: center center;
    /*将图片居中对齐*/
    margin: auto;
  }

  .login-form {
    width: 442px;
    height: 400px;
    background-color: rgba(248, 242, 235, 0.5);;
    position: relative;
    left: 455px;
    top: 170px;


  }

  #logo {
    width: 100%;
    height: 60px;
    background-color: aquamarine;
    margin-bottom: 60px;
  }

  .input {
    max-width: 300px;
    margin: auto
  }

  img {
    border-radius: 50%;
    width: 100px;
    position: absolute;
    left: 638px;
    top: 50px;
  }
</style>
